<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap-table列宽拖动</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="http://www.chendd.cn/app/images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="../dist/plugins/resizable/jquery.resizableColumns.css" />
<link rel="stylesheet" href="../../bootstrap.min.css" />
<link rel="stylesheet" href="../dist/bootstrap-table.css" />
<script type="text/javascript" src="../../jquery/jquery.min.js"></script>
<script type="text/javascript" src="../../popper.min.js"></script>
<script type="text/javascript" src="../../bootstrap.min.js"></script>
<script type="text/javascript" src="../dist/plugins/resizable/jquery.resizableColumns.min.js"></script>
<script type="text/javascript" src="../dist/bootstrap-table.min.js"></script>
<script type="text/javascript" src="../dist/plugins/resizable/bootstrap-table-resizable.min.js"></script>
</head>
<body>

<div id="toolbar">
    <button class="btn btn-primary"><i class="fa fa-plus fa-1"></i>&nbsp;新增</button>
    <button class="btn btn-info"><i class="fa fa-edit fa-1"></i>&nbsp;修改</button>
    <button class="btn btn-danger"><i class="fa fa-times fa-1"></i>&nbsp;删除</button>
</div>
<table id="data-table" class="text-nowrap">
</table>

<script type="text/javascript">
$(function () {
    $("#data-table").bootstrapTable({
        showColumns: true,
        showRefresh: false,
        showToggle: true,
        showFullscreen: true,
        clickToSelect: true,
        toolbar: "#toolbar",
        url: "../basic/list.json",
        resizable: true,
        columns: [
            {radio: true},
            {field: "force" , title: "势力" , align: "center", sortable: true},
            {field: "magatama" , title: "勾玉" , width: 100 , align: "center", sortable: true},
            {field: "name" , title: "姓名" , sortable: true},
            {field: "sex" , title: "性别" , align: "center" , sortable: true},
            {field: "designation" , title: "称号"},
            {field: "description" , title: "称号描述" , width: 500}
        ]
    });
});
</script>
</body>
</html>